<template name="components">
	<view>
		<scroll-view scroll-y class="page">
			<image src="https://cdn.nlark.com/yuque/0/2019/png/280373/1552908032971-assets/web-upload/e795fee4-c6cd-4951-b7d8-134aa9cd7c6b.png" mode="widthFix" class="response"></image>
			<view class="userinfo_box">
				<view class="padding text-center ">
					<!-- <view class="cu-avatar xl round" > -->
						<image class="cu-avatar xl round bg-white" v-if="userinfo" :src="userinfo.avatar" mode=""></image>
					<!-- </view> -->
					<view class="text-white text-bold text-lg padding-tb-sm">
						{{userinfo?userinfo.nickname:''}}
					</view>
					
				</view>
				
			</view>
			<view class="nav-list">
				<view  :data-url="item.path" class="nav-li" :class="'bg-'+item.color"
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index" @tap="menutap(item)">
					<view class="nav-title">{{item.title}}</view>
					<view class="nav-name">{{item.name}}</view>
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</view>
				<view  class="nav-li bg-green" 
				 :style="[{animation: 'show ' + ((elements.length)*0.2+1) + 's 1'}]" >
					<view class="nav-title">客服</view>
					<view class="nav-name">Service</view>
					<text :class="cuIcon-service"></text>
					<button open-type="contact" class="kefu_btn"> 客服</button>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultimg:'../../static/logo.png',
				elements: [{
						title: '我的授权',
						name: 'Auth',
						color: 'purple',
						cuIcon: 'vipcard',
						path:'/pages/authList/authList',
						type:1,
					},
					{
						title: '我的订单',
						name: 'Order',
						color: 'blue',
						cuIcon: 'formfill',
						path:'/pages/orderList/orderList',
						type:1,
					},
					{
						title: '设置',
						name: 'Settings',
						color: 'cyan',
						cuIcon: 'settings',
						path:'/pages/setting/setting',
						type:1,
						
					},
					{
						title: '审核',
						name: 'Check',
						color: 'orange',
						cuIcon: 'lightfill',
						path:'/pages/check/check',
						type:1,
					},
					{
						title: '关于',
						name: 'About',
						color: 'olive',
						cuIcon: 'infofill',
						path:'/pages/about/about',
						type:1,
					},
					
				],
				userinfo:false
			};
		},
		created() {
			this.getuserinfo()
		},
		methods:{
			getuserinfo(){
				this.util.csAjax('/addons/open/wxapp.user/index',{},(ret)=>{
					this.userinfo = ret.data
				})
			},
			menutap(item){
				switch (item.type){
					case 1:
						uni.navigateTo({
							url:item.path
						})
						break;
					default:
						break;
				}
				
			}
		}
	}
</script>

<style>
	.page {
		height: 100vh;
		position: relative;
	}
	.userinfo_box{
		position: absolute;
		padding-top: 80rpx;
		width: 750rpx;
		top: 0;
		
	}
	.kefu_btn{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 10;
		top: 0;
		left: 0;
		opacity: 0;
	}
</style>
